<template>
  <div v-if="show" class="layer" @click="handlerClose">
    <div
      class="down-wrap"
      :style="`background-image: url('${bgImg}');${styles}`"
      @click.stop
    >
      <img :src="closeIcon" class="close" @click="handlerClose">
    </div>
  </div>
</template>
<script>
export default {
  name: 'DOWN',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    bgImg: {
      type: [String, File],
      default: ''
    },
    diyStyle: {
      type: [Object],
      default: () => {}
    }
  },
  data () {
    return {
      closeIcon: require('@/assets/img/index/close.png')
    }
  },
  computed: {
    styles: function () {
      const _s = this.diyStyle
      return _s?.height ? `height: ${_s.height}; width: ${_s.width}` : ''
    }
  },
  methods: {
    handlerClose () {
      this.$emit('update:show', false)
    }
  }
}
</script>
<style lang="less" scoped>
.layer {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  .down-wrap{
    z-index: 9999;
    position: relative;
    overflow: hidden;
    width: 1260px;
    height: 700px;
    background-size: 100% 100%;
    .close {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 32px;
      background: #fff;
      border-radius: 4px;
    }
  }
}
</style>
